<template>
  <div class="accountfu">
    <h3>账户服务</h3>
   <div class="account-tubiao">
    <div class="tubiao">
        <ul>
            <li v-for="(v) in str1" :key="v.id">
               
                <img :src="v.picUrl">
                <p>{{v.picTitle}}</p>
            </li>
        </ul>
        <ul>
            <li v-for="(v) in str2" :key="v.id">
               
                <img :src="v.picUrl">
                <p>{{v.picTitle}}</p>
            </li>
        </ul>
    </div>
   </div>
  </div>
</template>

<script>
     import {Zhanghu} from "@/apis/link.js";
export default {
   
    data(){
        return {
           str:[],
           str1:[],
           str2:[]
        }
    },
    created(){
        Zhanghu().then((ok)=>{
        //   console.log(ok.data.data)
          this.str=ok.data.data;
          this.str1=this.str.slice(0,8)
          this.str2=this.str.slice(8,16)
        })

      }

}
</script>

<style lang="scss" scoped>
    .accountfu {
        width: 90%;
        margin:.2rem auto;
        .tubiao {
            width: 200%;
            height: 1.8rem;
            // background: #999;
            display: flex;
           
        }
        
    }
    .account-tubiao {
           width: 100%;
           overflow-x: scroll;
    }
    ul{
        width: 100%;
        height: 1.6rem;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        li {
            width: 25%;
             display: flex;
            flex-direction: column;
            align-items: center;
            p {
                font-size: .12rem;
                margin-top: .05rem;
            }
        }
        
       
    }

</style>